<template>
	<view class="container">
		<u-navbar title='数据统计-装修公司' :autoBack="true" leftIconColor="#1E272E" bgColor="transparent"
			:titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#1E272E'}"></u-navbar>
		<image src="https://renovationcdn.jiachuangnet.com/index/workerIndex/bg.png" class='bg' style=""></image>
		<view style="position: absolute;top:180rpx;left:25rpx;width: 700rpx;min-height:160rpx;z-index: 2;">
			<view class="floor">
				<view class="title_box flex">
					<view class="title_text flex"
						style="justify-content: space-between; width: 100%;align-items: center;margin: 20rpx 0;">
						<view>项目经理</view>
						<view @click="show=true" style="width: 200rpx;font-weight:500;">
							<u-input placeholder="默认全部"  v-model='jlValue' style="width: 240rpx;" :disabled="true">
							</u-input>
						</view>
					</view>
				</view>
				<view class="title_box flex">
					<!-- <view class="title_text" v-if="time1||time2">
						{{time1?$u.timeFormat(time1, 'yyyy.mm.dd'):''}}{{time2?'-'+$u.timeFormat(time2, 'yyyy.mm.dd'):''}}
					</view>
					<view class="title_text" v-else>
						选择日期
					</view>
					<view class="title_time" @click="openCalendar">
						<image src="https://renovationcdn.jiachuangnet.com/data33.png" mode=""
							style="margin-left: 21rpx;width: 28rpx;height: 28rpx;"></image>
					</view> -->
					<view class="flex" style="align-items: center;justify-content: space-between;margin-bottom: 30rpx;width: 100%;">
						<image src="https://renovationcdn.jiachuangnet.com/data33.png" mode=""
							style="margin-right: 21rpx;width: 26rpx;height: 26rpx;"></image>
						<view class="" style="font-size: 28rpx;white-space: nowrap;margin-right: 10rpx;">选择日期:</view>
						<view class="workerSearch" style="width: 480rpx;">
							<view @click="startShow=true" style="width: 220rpx;">
								<u-input placeholder="开始日期" v-model='startTime'  :disabled="true">
								</u-input>
							</view>
							-
							<view @click="endShow=true" style="width: 220rpx;">
								<u-input placeholder="结束日期" v-model='endTime'  :disabled="true">
								</u-input>
							</view>
						</view>
					</view>
				</view>
				<view class="title_text" style="margin: 0 0 30rpx 0;width: 250rpx;" >
					<u-subsection :list="list" :current="current" @change="sectionChange" inactiveColor="#fff" activeColor="#13989a"
						bgColor="#13989a" mode="button"></u-subsection>
				</view>
				<view class="charts-box" v-if="current==0">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData1" :ontouch="true"
						:inScrollView='true' :canvas2d="true" canvas-id="column1" />

				</view>
				<view class="charts-box" v-if="current==1">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData2" :ontouch="true"
						:inScrollView='true' :canvas2d="true" canvas-id="column2" />
				</view>
				<view class="title_box flex">
					<view class="title_text">
						逾期店铺
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="optsLine" :chartData="chartData3" :inScrollView="true"
						:canvas2d="true" canvas-id="line3" :ontouch="true" />
				</view>
				<view class="title_box flex">
					<view class="title_text">
						报价单金额
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="optsLine" :chartData="chartData4" :inScrollView="true"
						:canvas2d="true" canvas-id="line4" :ontouch="true" />

				</view>
				<view class="title_box flex">
					<view class="title_text">
						补货率
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData5" :ontouch="true"
						:inScrollView='true' :canvas2d="true" canvas-id="column5" />

				</view>
				<view class="title_box flex">
					<view class="title_text">
						逾期率
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData6" :ontouch="true"
						:inScrollView='true' :canvas2d="true" canvas-id="column6" />
				</view>
				<view class="title_box flex">
					<view class="title_text">
						售后数量
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData7" :ontouch="true"
						:inScrollView='true' :canvas2d="true" canvas-id="column7" />
				</view>
				<view class="title_box flex">
					<view class="title_text">
						48小时售后完成率
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="optsLine" :chartData="chartData8" :ontouch="true"
						:inScrollView='true' :canvas2d="true" canvas-id="column8" />
				</view>
				<view class="title_box flex">
					<view class="title_text">
						合作工人好评率（满分5分）
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="optsLine" :chartData="chartData9" :ontouch="true"
						:inScrollView="true" :canvas2d="true" canvas-id="column9" />
				</view>
				<!-- <view class="title_box flex">
					<view class="title_text">
						验收一次通过率
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="optsLine" :chartData="chartData10" :ontouch="true"
						:inScrollView='true' :canvas2d="true" canvas-id="column10" />
				</view> -->
			</view>
		</view>
		<u-calendar :show="startShow" mode="single" @confirm="chooseStartDate" :min-date="minDate" :max-date="maxDate"
			monthNum='24' @close="startShow=false" closeOnClickOverlay  color="#1f9d9e"/>

		<u-calendar :show="endShow" mode="single" @confirm="chooseEndDate" :min-date="minDate" :max-date="maxDate"
			monthNum='24' @close="endShow=false" closeOnClickOverlay color="#1f9d9e"/>
		<u-picker :show="show" :columns="columnsJl" color="#1f9d9e" @close="show=false" cancel="show=false" @confirm="chooesJl"
			closeOnClickOverlay></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				minDate: new Date('2024-01-01').getTime(),
				maxDate: new Date('2030-12-31').getTime(),
				list: ['安装数量', '装修金额'],
				current: 0,
				jlRange: [],
				jlValue: '',
				jlId: null,
				columnsJl: [],
				startTime: '',
				endTime: '',
				startShow: false,
				endShow: false,
				show: false,
				companyDataVo: {},
				weekIndex: 0,
				chartData1: {}, //安装数量
				chartData2: {}, //装修金额
				chartData3: {}, //逾期店铺
				chartData4: {}, //报价单金额
				chartData5: {}, //补货率
				chartData6: {}, //逾期率
				chartData7: {}, //售后数量
				chartData8: {}, //48小时售后完成率
				chartData9: {}, //合作工人好评率（满分5分）
				chartData10: {}, //验收一次通过率
				opts: { //条形统计
					color: ["#13989a", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					// padding: [30,10,15,10],
					enableScroll: true,
					show: true,
					legend: {
						show: false
					},
					xAxis: {
						labelCount: 3,
						itemCount: 5,
						scrollShow: true,
						disableGrid: true,
						fontColor: "#333333",
						marginTop: 0,
						fontSize: 10
						// rotateLabel:true,
						// rotateAngle:25
					},
					yAxis: {
						// gridType: "solid",
						// gridColor:"#8EE3FF",
						splitNumber: 4,
						showTitle: false,
						data: [{
							axisLine: false,
						}]
					},

					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							seriesGap: 5,
							linearOpacity: 0.5,
							barBorderCircle: true,
							customColor: [
								"#13989a",
								"#1684fc",
							]
						}
					}
				},
				opts2: { //圆环统计
					rotate: false,
					rotateLock: false,
					color: ["#13989a", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 40,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				optsLine: { //折现
					color: ["#13989a", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					// padding: [30,10,15,10],
					enableScroll: true,
					legend: {
						show: false
					},
					show: true,
					xAxis: {
						labelCount: 3,
						itemCount: 5,
						scrollShow: true,
						disableGrid: true,
						fontColor: "#333333",
						marginTop: 0,
					},
					yAxis: {
						// gridType: "solid",
						// gridColor:"#8EE3FF",
						splitNumber: 4,
						showTitle: false,
						data: [{
							axisLine: false,
						}]
					},
					extra: {}
				},
			}
		},
		created() {
			this.changeCompanyId()
			this.getCompanyDataVo()
		},
		watch: {
			weekIndex(newVal, oldVal) {
				this.getCompanyDataVo()
			},
		},
		methods: {
			chooesJl(e) {
				console.log(e)
				this.jlValue = e.value[0]
				this.jlId = this.jlRange[e.indexs[0]].userId
				this.show = false
				this.getCompanyDataVo()
			},

			sectionChange(e) {
				this.current = e
			},
			changeCompanyId() {
				uni.$u.http.get('/company/getManagerList', {
					params: {
						companyId: uni.getStorageSync('companyId')
					}
				}).then(res => {
					if (res) {
						this.jlRange = res
						this.columnsJl.push(res.map(item => {
							return item.userName
						}))
					}
				})

			},
			chooseStartDate(e) {
				this.startTime = e[0]
				this.startShow = false
				console.log(e)
				if(this.startTime&&this.endTime){
					this.getCompanyDataVo()
				}
			},
			chooseEndDate(e) {
				this.endTime = e[0]
				this.endShow = false
				console.log(e)
				if(this.startTime&&this.endTime){
					this.getCompanyDataVo()
				}
			},
			getCompanyDataVo() {
				uni.$u.http.post('/company/getCompanyDataNewVo', {
					// flag:(!this.time1 && !this.time2) ? this.weekIndex + 1 : 1  , //1 周 2 月 3 年
					startTime: this.startTime,
					endTime: this.endTime,
					projectUserId:this.jlId
				}).then(res => {
					if (res) {
						this.companyDataVo = res
					}
				}).then(res => {
					this.getChart1()
					this.getChart2()
					this.getChart3()
					this.getChart4()
					this.getChart5()
					this.getChart6()
					this.getChart7()
					this.getChart8()
					this.getChart9()
					// this.getSaleAfter()
				})
			},
			getChart1() {
				this.chartData1 = {}
				let data = null
				if( this.companyDataVo.storeCountVoList.length){
					data = {
						categories: this.companyDataVo.storeCountVoList.map(item => item.year + '年' + item.month + '月'),
						series: [{
							name: "安装数量",
							data: this.companyDataVo.storeCountVoList.map(item => item.count)
						}]
					};
				}else{
					data = {
						categories: [''],
						series: [{
							name: "",
							data: ['']
						}]
					};
				}
				
				this.chartData1 = JSON.parse(JSON.stringify(data));
			},
			getChart2() {
				this.chartData2 = {}
				let data = null
				if(this.companyDataVo.zxMoneyVoList.length){
					data = {
						categories: this.companyDataVo.zxMoneyVoList.map(item => item.year + '年' + item.month + '月'),
						series: [{
							name: "装修金额",
							data: this.companyDataVo.zxMoneyVoList.map(item => item.money)
						}]
					};
				}else{
					data = {
						categories: [''],
						series: [{
							name: "",
							data: ['']
						}]
					};
				}
				this.chartData2 = JSON.parse(JSON.stringify(data));
			},
			getChart3() {
				this.chartData3 = {}
				let data
				if(this.companyDataVo.yqStoreCountVoList.length){
					data = {
						categories: this.companyDataVo.yqStoreCountVoList.map(item => item.year + '年' + item.month + '月'),
						series: [{
							name: '逾期店铺',
							data: this.companyDataVo.yqStoreCountVoList.map(item => item.count),
						}]
					};
				}else{
					data = {
						categories: [''],
						series: [{
							name: "",
							data: ['']
						}]
					};
				}
				this.chartData3 = JSON.parse(JSON.stringify(data));
			},
			getChart4() {
				this.chartData4 = {}
				let data
				if(this.companyDataVo.materialMoneyVoList.length){
					data = {
						categories: this.companyDataVo.materialMoneyVoList.map(item => item.year + '年' + item.month + '月'),
						series: [{
							name: '报价单金额',
							data: this.companyDataVo.materialMoneyVoList.map(item => item.money),
						}]
					};
				}else{
					data = {
						categories: [''],
						series: [{
							name: "",
							data: ['']
						}]
					};
				}
				this.chartData4 = JSON.parse(JSON.stringify(data));
			},
			getChart5() {
				this.chartData5 = {}
				let data
				if(this.companyDataVo.bhRateVoList.length){
					data = {
						categories: this.companyDataVo.bhRateVoList.map(item => item.year + '年' + item.month + '月'),
						series: [{
							name: '补货率',
							data: this.companyDataVo.bhRateVoList.map(item => item.rate),
						}]
					};
				}else{
					data = {
						categories: [''],
						series: [{
							name: "",
							data: ['']
						}]
					};
				}
				this.chartData5 = JSON.parse(JSON.stringify(data));
			},
			getChart6() {
				this.chartData6 = {}
				let data
				if(this.companyDataVo.yqRateVoList.length){
					data = {
						categories: this.companyDataVo.yqRateVoList.map(item => item.year + '年' + item.month + '月'),
						series: [{
							name: '逾期率',
							data: this.companyDataVo.yqRateVoList.map(item => item.rate),
						}]
					};
				}else{
					data = {
						categories: [''],
						series: [{
							name: "",
							data: ['']
						}]
					};
				}
				this.chartData6 = JSON.parse(JSON.stringify(data));
			},
			getChart7() {
				this.chartData7 = {}
				let data
				if(this.companyDataVo.afterCountVoList.length){
					data = {
						categories: this.companyDataVo.afterCountVoList.map(item => item.year + '年' + item.month + '月'),
						series: [{
							name: '售后数量',
							data: this.companyDataVo.afterCountVoList.map(item => item.count),
						}]
					};
				}else{
					data = {
						categories: [''],
						series: [{
							name: "",
							data: ['']
						}]
					};
				}
				this.chartData7 = JSON.parse(JSON.stringify(data));
			},
			getChart8() {
				this.chartData8 = {}
				let data
				if(this.companyDataVo.afterRateVoList.length){
					data = {
						categories: this.companyDataVo.afterRateVoList.map(item => item.year + '年' + item.month + '月'),
						series: [{
							name: '售后完成率',
							data: this.companyDataVo.afterRateVoList.map(item => item.rate),
						}]
					};
				}else{
					data = {
						categories: [''],
						series: [{
							name: "",
							data: ['']
						}]
					};
				}
				
				this.chartData8 = JSON.parse(JSON.stringify(data));
			},
			getChart9() {
				this.chartData9 = {}
				let data
				if(this.companyDataVo.grGoodRateVoList.length){
					data = {
						categories: this.companyDataVo.grGoodRateVoList.map(item => item.year + '年' + item.month + '月'),
						series: [{
							name: '工人好评率',
							data: this.companyDataVo.grGoodRateVoList.map(item => item.rate),
						}]
					};
				}else{
					data = {
						categories: [''],
						series: [{
							name: "",
							data: ['']
						}]
					};
				}
				
				this.chartData9 = JSON.parse(JSON.stringify(data));
			},
		}
	}
</script>

<style lang="scss" scoped>
	// ::v-deep.title_text{
	// 	.u-subsection{
	// 		padding: unset;
	// 	}
	// 	.u-subsection__bar{
	// 		height: 80%;
	// 	}
	// 	.u-subsection--button__bar{
	// 		background-color:#1684fc;
	// 		color: #fff;

	// 	}
	// 	.u-subsection{
	// 		background-color: #1684fc !important;
	// 	}
	// 	.u-subsection__item{
	// 		background-color: #fff;
	// 	}
	// }
	.timeConner {
		display: flex;
		background: #0da2a2;
		height: 80rpx;
		border-radius: 50rpx;
		margin-left: 50rpx;
		margin-top: 150rpx;
		margin-right: 50rpx;
		justify-content: space-evenly;
		color: #fff;
		align-items: center;
		border: 10rpx solid #15a29d;
	}

	.charts-box {
		width: auto;
		height: 386rpx;
		position: inherit
	}

	.container {
		min-height: 100vh;
		overflow-y: scroll;
		position: relative;

		.cart_box {
			color: #fff;
			background: url('https://renovationcdn.jiachuangnet.com/bg33.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 214rpx;

			.cart_item {
				flex-direction: column;
				align-items: center;
				height: 75%;
				justify-content: space-around;
			}
		}

		.floor {
			border-radius: 20rpx;
			padding: 29rpx 21rpx;
			margin-top: 22rpx;
			background-color: #fff;
			min-height: 434rpx;

			.grid {
				.grid1 {
					height: 168rpx;
					background: #F4F7F9;
					border-radius: 10rpx;
					align-items: center;
					margin-top: 22rpx;

					.cart_item {
						flex: 1;
						justify-content: space-around;
						flex-direction: column;
						align-items: center;
						height: 60%;
					}
				}

				.grid2 {
					margin-top: 22rpx;
					justify-content: space-between;

					.cart_item,
					.cart_item1 {
						width: 315rpx;
						height: 191rpx;
						justify-content: space-between;
						flex-direction: column;
						background: #F4F7F9;
						border-radius: 10rpx;
						box-sizing: border-box;
						padding: 40rpx 25rpx;
					}

					.cart_item1 {
						height: 144rpx;
						box-sizing: border-box;
						align-items: center;
						margin-bottom: 20rpx;
					}
				}
			}


			.title_box {
				justify-content: space-between;
				align-items: center;
				color: #1E272E;
				font-size: 32rpx;

				.title_text {
					font-weight: bold;
					font-size: 28rpx;
					margin: 20rpx;
				}
			}

			.week_pick_box {
				padding: 11rpx 23rpx;
				margin-top: 21rpx;
				width: 660rpx;
				height: 88rpx;
				background: #f1f9f9;
				border-radius: 10rpx;
				box-sizing: border-box;

				.week_item {
					flex: 1;
					color: #515151;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.week_item_active {
					color: #13989A;
					background: #FFFFFF;
					border-radius: 10rpx;
				}
			}
		}
	}

	.bg {
		width: 750rpx;
		height: 430rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.workerSearch {
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		width: 496rpx;
		height: 78rpx;
		background: #F4F7F9;
		border-radius: 39rpx;
		opacity: 0.9;
	}

	.bottom {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		padding-left: 120rpx;
		padding-right: 120rpx;
	}
</style>